<template>
  <view
    class="choose-image"
    :style="style"
    @click="chooseImage"
  >
    <view class="choose-image__image">
      <image
        v-if="thumb"
        :src="thumb"
        mode="aspectFit"
      ></image>
    </view>

    <template v-if="!image">
      <view class="choose-image__btn">
        <image
          class="choose-image__icon"
          src="/static/images/icon/camera.png"
          mode="aspectFill"
        ></image>
      </view>

      <view class="choose-image__placeholder">
        {{ placeholder }}
      </view>
    </template>
    <template v-else>
      <view class="chooe-image-toolbar">
        <view
          class="iconfont icon-ashbin"
          @click.stop="remove"
        >
        </view>
        <view
          class="iconfont icon-zoom-out"
          @click.stop="zoom"
        >
        </view>
      </view>
    </template>
    <image-compresser ref="imageCompresser"></image-compresser>
  </view>
</template>

<script>
  import imageCompresser from "@/components/imageCompresser";
  export default {
    name: "ChooseImage",
    components: {
      imageCompresser,
    },
    props: {
      placeholder: {
        type: String,
        default: "上传图片",
      },
      value: {
        type: [String, Object],
        default: "",
      },

      width: {
        type: String,
        default: "",
      },

      autoUpload: {
        type: Boolean,
        default: true,
      },
      tag: {
        type: String,
        default: "",
        required: true,
      },

      field: {
        type: String,
        default: "",
        required: true,
      },
    },

    data() {
      return {
        image: "",
        thumb: "",
      };
    },

    computed: {
      style() {
        const style = {};

        if (this.width) {
          style.width = this.width;
        }
        return style;
      },
    },
    methods: {
      chooseImage() {
        uni.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ["album", "camera"],
          success: (res) => {
            const tempFilePaths = res.tempFilePaths;
            this.$refs.imageCompresser
              .compress({
                src: tempFilePaths[0],
                maxSize: 1920,
                fileType: "jpg",
                quality: 0.85,
                multiple: false,
              })
              .then((res) => {
                console.log("res");

                console.log(res);

                if (this.autoUpload) {
                  this.uploadImage(res);
                } else {
                  this.thumb = res;
                  this.image = res;
                  this.$emit("input", res);
                }
              })
              .catch((err) => {
                console.log(err);

                uni.showToast({
                  title: "压缩图片失败",
                  icon: "none",
                  duration: 5000,
                });
              });
          },
        });
      },
      uploadImage(filePath) {
        this.$request({
          url: "/ucenter/order/upload/" + this.tag + "/" + this.field,
          method: "UPLOAD",
          filePath,
          name: "image",
        })
          .then((res) => {
            this.$emit("input", res.data.url);
            this.thumb = res.data.url.thumb;
            this.image = res.data.url.url;
            uni.showToast({
              title: "上传成功",
              icon: "success",
            });
          })
          .catch((err) => {
            uni.showToast({
              title: "上传失败:" + err.msg,
              icon: "none",
              duration: 5000,
            });
          });
      },

      remove() {
        this.image = "";
        this.thumb = "";
        this.$emit("input", "");
      },
      zoom() {
        uni.$emit("previewUplaodImage"); //告诉parent组件，当前组件正在预览图片，不要加载数据
        uni.previewImage({
          urls: [this.image],
          current: this.image,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .choose-image {
    position: relative;
    min-width: 316rpx;
    min-height: 200rpx;
    border: 1rpx solid rgba($color: #000000, $alpha: 0.1);
    border-radius: 20rpx;
    display: flex;
    .choose-image__btn {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: 100rpx;
      height: 100rpx;
      background-color: rgba($color: #000000, $alpha: 0.2);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .choose-image__icon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .choose-image__placeholder {
      position: absolute;
      bottom: 10rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 28rpx;
      font-weight: bold;

      white-space: nowrap;

      color: rgba($color: #000000, $alpha: 0.5);
    }

    .choose-image__image {
      flex: 1;
      border-radius: 20rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;

        // object-fit: cover;
      }
    }

    .chooe-image-toolbar {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 20rpx;
      background: rgba($color: #000000, $alpha: 0.3);
      border-radius: 20rpx;
      .iconfont {
        font-size: 28rpx;
        color: #fff;

        & + .iconfont {
          margin-left: 40rpx;
        }
      }
    }
  }
</style>
